<template>
  <view class="apply-con">
    <view class="a-sub-title">请选择暂停相亲的原因</view>

    <view class="a-con">
      <view class="a-item" :class="activeId == v.id ? 'active-item' : ''" v-for="(v, i) in items" :key="i" @click="changeItem(v.id, v.text)">
        <image :src="checkboxIcon" mode="widthFix" v-if="activeId == v.id" class="a-img" />
        <view class="a-checkbox" v-else></view>
        <view style="margin-left:20rpx">{{v.text}}</view>
      </view>
    </view>
  </view>
</template>
 
<script setup>
import checkboxIcon from "@/subPages/static/checkbox.svg";

const props = defineProps({
  items: {
    type: Array,
    default: () => [],
  },
});

const activeId = ref(1);
const checked = ref("");

const changeItem = (id, val) => {
  activeId.value = id;
  checked.value = val;
};

defineExpose({
  checked,
});
</script>
 
<style lang='scss' scoped>
.a-sub-title {
  font-weight: bold;
  font-size: 36rpx;
  color: #000;
  padding-bottom: 40rpx;
}
.a-item {
  width: 650rpx;
  height: 120rpx;
  @include borderBox;
  padding: 40rpx 30rpx;
  background: #f8f8f8;
  border-radius: 60rpx;
  margin-bottom: 20rpx;
  font-weight: bold;
  font-size: 36rpx;
  color: #333;
  display: flex;
  align-items: center;
  border: 2rpx solid #f8f8f8;
}
.a-checkbox {
  width: 36rpx;
  height: 36rpx;
  background: #fff;
  border-radius: 40rpx;
  border: 2rpx solid #ddd;
}

.a-img {
  width: 40rpx;
}

.active-item {
  color: #f65952;
  background: rgba(246, 89, 82, 0.1);
  border: 2rpx solid #f65952;
}
</style>